<template>
    <div class='head'>
        <div style='display:flex; align-items: center; justify-content: flex-start; '>
            <div style="display: flex; align-items: center;">
                <p>查询试题：</p>
                <el-input v-model="nameFname" style="width: 240px" placeholder="请输入试题名称" />
            </div>
            <div style="margin-left: 30px;">
                <el-button type="primary" @click="selectSt()">点击查询</el-button>
            </div>
            <div class="insertSt"><el-button type="primary" @click="open">新建试题</el-button></div>
        </div>
        <el-table
            :data="dataZz"
            style="width: 100%"
            :row-class-name="tableRowClassName"
        >
            <el-table-column prop="kind_name" label="类型名称" width="180" />
            <el-table-column fixed="right" label="操作" >
                <template #default="scope">
                    <el-button link type="primary" size="small" @click="deletuser(scope.row)">删除</el-button>
                    <el-button link type="primary" size="small" @click="selectuser(scope.row)">查看</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
import { ElMessage, ElMessageBox } from 'element-plus'
export default {
   components: {},
    data() {
        return {
            dataZz:[],
            nameFname:'',
            nameSt:'',
        };
   },
//监听属性 类似于data概念
    computed: {},
//监控data中的数据变化
    watch: {},

    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
        this.$store.dispatch('questionsType')
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        console.log('------dataZz-------')
        this.dataZz = this.$store.state.gridData
        console.log(this.dataZz)
        console.log('------dataZz-------')
    },
    //方法集合
    methods: {
        open() {
        this.$prompt('请输入试题名称', '新建试题', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
          this.$message({
            type: 'success',
            message: '新增成功' 
          });
          this.nameFname = value
           this.ReturnClick();
          console.log('-----------')
          console.log(value)
          console.log('-----------')
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });
       
      },

        // 页面跳转
        selectuser(val){
            this.$router.push('/questions/'+val.kind_id)
        },
        //查询试题
        selectSt(){              
            this.get('/kind/?kindName='+this.nameFname).then(res=>{
            if(res.code == 200){
                this.dataZz = res.data
            }
        })
        },
        //新建试题
        ReturnClick() {
            let param = {
                kind_name: this.nameFname
            }
            console.log('----已执行-----');
            console.log(param.kind_name)
            this.post('/kind/save', param).then(res=>{
                if(res.code == 200){
                    this.$store.dispatch('questionsType')
                }else{
                    this.$message({
                        message: res.data,
                        type: 'error',
                    })
                }
            })
        },
        tableRowClassName ({row,rowIndex}) {
            if (rowIndex === 1) {
                return 'warning-row'
            } else if (rowIndex === 3) {
                return 'success-row'
            }
                return ''
        },
        deletuser(val) {
            ElMessageBox.confirm('你确定要删除？','删除提示', {
                confirmButtonText: '删除',
                cancelButtonText: '取消',
                type: 'tijia',
                draggable: true,
            }).then(() => {
                setTimeout(() =>{
                    this.get('/question/del_by_kind?kind_id='+val.kind_id).then(res=>{
                        if(res.code == 200){
                            this.$message({
                                message: '删除成功!',
                                type: 'success',
                            })
                            this.$store.dispatch('questionsType')
                        }else{
                            this.$message({
                                message: res.data,
                                type: 'error',
                            })
                        }
                    })
                },300)
            }).catch(() => {
            })
        }
    },
    //生命周期 - 创建之前 
    beforeCreate() {},
    //生命周期 - 挂载之前
    beforeMount() {},
    // 生命周期 - 更新之前 
    beforeUpdate() {},
    //生命周期 - 更新之后
    updated() {},
    //生命周期 - 销毁之前
    beforeDestroy() {},
    //生命周期 - 销毁完成
    destroyed() {},
    //如果页面有keep-alive缓存功能，这个函数会触发
    activated() {},
}
</script>
<style >
.el-table .warning-row {
--el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
--el-table-tr-bg-color: var(--el-color-success-light-9);
}
.insertSt{   
     margin-left: auto;
}
</style>